<template>
  <div class="wrapper" ref="sudoku">
    <div class="item">
      <div class="item__content">1</div>
    </div>
    <div class="item">
      <div class="item__content">2</div>
    </div>
    <div class="item">
      <div class="item__content">3</div>
    </div>
    <div class="item">
      <div class="item__content">4</div>
    </div>
    <div class="item item--begin" ref="item--begin" @click="run">
      <div class="item__content">开始</div>
    </div>
    <div class="item">
      <div class="item__content">6</div>
    </div>
    <div class="item">
      <div class="item__content">7</div>
    </div>
    <div class="item">
      <div class="item__content">8</div>
    </div>
    <div class="item">
      <div class="item__content">9</div>
    </div>
  </div>
</template>

<script>
import Sudoku from "../sudoku";
export default {
  data () {
    return {
      item_el: '',
    }
  },
  mounted() {
    // var begin_el = document.querySelector(".item--begin");
    // var item_el = this.$refs["sudoku"].querySelectorAll(".item");
    // begin_el.addEventListener("click", function() {
    //   const sudoku = new Sudoku({
    //     item_el: item_el,
    //     endIdx: 3,
    //     totalCycles: 4
    //   });
    //   sudoku.init();
    // });
    this.item_el = this.$refs["sudoku"].querySelectorAll(".item")
  },
  methods: {
    run () {
      const sudoku = new Sudoku({
        // item_el: this.$refs["sudoku"].querySelectorAll(".item"),
        item_el: this.item_el,
        endIdx: 3,
        totalCycles: 4
      })
      sudoku.init()
    }
  }
};
</script>

<style scoped>
.disable {
  pointer-events: none;
}
* {
  margin: 0;
  padding: 0;
}
.wrapper {
  width: 500px;
  margin: 0 auto;
}
.item {
  display: inline-block;
  text-align: center;
  width: 150px;
  height: 100px;
  margin: 3px;
  padding-top: 50px;
  background-color: rgb(120, 172, 233);
}
.item--begin {
  background-color: rgb(161, 76, 76);
}
.item--sel {
  background-color: #fff;
}
.item--normal {
  background-color: rgb(120, 172, 233);
}
</style>